<template>
  <div class="dashboard-container">
    <div class="app-container" />
    <!-- 卡片面板 -->
    <el-card class="tree-card">
      <!-- 组织架构的头部内容 -->
      <!-- 使用封装的操作组件 -->
      <tree-tools
        :tree-node="company"
        :is-root="true"
        @addDept="addDept"
        @editDept="editDept"
      />
      <!-- /组织架构的头部内容 -->

      <!-- 组织架构的具体内容 树形 -->
      <el-tree
        :data="departs"
        :props="defaultProps"
        :default-expand-all="true"
      >
        <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
        <!-- 1.作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
        <!-- 2.使用封装的操作组件 -->
        <tree-tools
          slot-scope="{data}"
          :tree-node="data"
          @delDept="getDepartments"
          @addDept="addDept"
          @editDept="editDept"
        />
      </el-tree>
      <!-- /组织架构的具体内容 -->
    </el-card>

    <!-- 新增子部门 和 编辑部门 对话框 -->
    <add-Dept
      ref="addDept"
      v-model="showDialog"
      :node="node"
      @addDept="getDepartments"
    />

  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'DepartmentsIndex',
  // 局部注册的组件
  components: {
    TreeTools,
    AddDept
  },
  data () {
    return {
      defaultProps: {
        label: 'name'
      },
      company: {},
      departs: [],
      node: null, // 当前操作添加或编辑的部门信息
      showDialog: false // 显示弹出对话框
    }
  },
  created () {
    this.getDepartments()
  },
  methods: {
    async getDepartments () {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(result.depts, '') // 将扁平的数据转化成树形结构 封装递归方法
    },
    addDept (node) {
      // 弹出添加子部门对话框
      this.showDialog = true
      this.node = node
    },
    async editDept (node) {
      this.node = node
      // 调用子组件的方法 使用$refs.子组件的ref.方法名
      // 因为此方法内含请求是异步, 为控制对话框出现前数据已经写入表单, 所以使用await
      await this.$refs.addDept.getDepartDetail(node.id)
      // 弹出编辑部门对话框
      this.showDialog = true
    }
  }
}
</script>

<style>
.tree-card {
  margin: 30px 30px;
  padding: 30px 140px;
  font-size: 14px;
}
</style>
